<template>
	<view>
		<view class="barTitle"
			:style="{paddingTop: top + 'px', height: height + 'px',paddingBottom: '10px',background: `rgba(246,241,231, ${opacity})`}">
			我的
		</view>
		<u-gap :height="top + height + 10"></u-gap>
		<image :src="mixiImgUrl + '/static/my/wdbj.png'" mode="widthFix" class="bg"></image>
		<view class="auth" v-if="!token" @click="toLogin">
			<image src="/static/头像-copy-copy.png" mode=""></image>
			游客
		</view>
		<block v-else>
			<view class="user flex-align">
				<view class="user-avatar">
					<image :src="userInfo.avatar" mode="" class="user-avatar-item"></image>
					<image src="/static/my/编辑.png" mode="" class="user-avatar-edit"></image>
				</view>
				<view class="user-r flex-center">
					<view class="user-r-t flex-align">
						<view class="user-r-t-name">{{userInfo.nickname || ''}}</view>
						<view class="user-r-t-name-create flex-align">
							<image :src="mixiImgUrl + '/static/my/hypt.png'" mode=""></image>
							创建员
						</view>
					</view>
					<view class="user-r-b">{{ userInfo.phone || '' }}</view>
				</view>
			</view>
			<view class="remember">
				<image :src="mixiImgUrl + '/static/my/22.png'" mode=""></image>
			</view>
			<view class="layout">
				<view class="layout-l" @click="toPage('我的钱包')">
					<image :src="mixiImgUrl + '/static/my/img_wdqb.png'" mode=""></image>
					<view class="layout-l-tx">我的钱包</view>
				</view>
				<view class="layout-r" @click="toPage('实名认证')">
					<image :src="mixiImgUrl + '/static/my/img_youhuiq.png'" mode=""></image>
					<view class="layout-l-tx">实名认证</view>
				</view>
			</view>
			<view class="list">
				<view class="list-item flex-sp" v-for="it in list" @click="toPage(it.label)">
					<view class="list-item-l flex-center">
						<image :src="it.url" mode=""></image>
						{{it.label}}
					</view>
					<image :src="mixiImgUrl + '/static/下一步.png'" mode=""></image>
					<button v-if="it.label === '我的分享'" open-type="share"></button>
					<button v-if="it.label === '联系客服'" open-type="contact"></button>
				</view>
			</view>
		</block>
		<u-gap :height="15"></u-gap>
		<u-popup :show="show" @close="close" mode="bottom" :safeAreaInsetBottom="false">
			<view class="popup">
				<view class="popup-title">合作联系</view>
				<view class="popup-content">
					<view class="popup-content-name">钟老师</view>
					<view class="popup-content-wxCode flex-center">
						微信：34554564577
						<image :src="mixiImgUrl + '/static/复制.png'" mode=""></image>
					</view>
					<view class="popup-content-qrCode">
						<image :src="mixiImgUrl + '/static/12.png'" mode=""></image>
					</view>
					<view class="popup-content-tx">保存图片到相册</view>
					<view class="popup-content-btn flex-center">打电话</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				opacity: 0,
				list: [{
						label: '个人信息',
						url: '/static/my/aiqingyulu(1).png'
					},
					{
						label: '成员管理',
						url: '/static/my/aiqingyulu.png'
					},
					{
						label: '操作视频',
						url: '/static/my/czsp.png'
					},
					{
						label: '纪念馆审核',
						url: '/static/my/jiniangshenhe.png'
					},
					{
						label: '资料审核',
						url: '/static/my/zilshenh.png'
					},
					{
						label: '我的分享',
						url: '/static/my/fenxiang.png'
					},
					{
						label: '合作联系',
						url: '/static/my/hezlx.png'
					},
					{
						label: '设置',
						url: '/static/my/shez.png'
					},
					{
						label: '联系客服',
						url: '/static/my/zhuanshuhongniang.png'
					},
					{
						label: '关于我们',
						url: '/static/my/guanyu.png'
					}
				],
				show: false,
				token: ''
			}
		},
		onShow() {
			let token = uni.getStorageSync('token')
			this.token = token
			if (this.token) {
				this.$store.dispatch('getUserInfo')
			}
		},
		computed: {
			top() {
				return this.$store.state.menuButton.top
			},
			height() {
				return this.$store.state.menuButton.height
			},
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		methods: {
			close() {
				this.show = false
			},
			toLogin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			toPage(name) {
				switch (name) {
					case '实名认证':
						uni.navigateTo({
							url: '/pages/authentication/authentication'
						})
						break;
					case '我的钱包':
						uni.navigateTo({
							url: '/pages/my/wallet'
						})
						break;
					case '关于我们':
						uni.navigateTo({
							url: '/pages/aboutUs/aboutUs'
						})
						break;
					case '资料审核':
						uni.navigateTo({
							url: '/pages/my/toExamine'
						})
						break;
					case '个人信息':
						uni.navigateTo({
							url: '/pages/my/user'
						})
						break;
					case '成员管理':
						uni.navigateTo({
							url: '/pages/member-management/member-management'
						})
						break;
					case '合作联系':
						this.show = true
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.barTitle {
		width: 100%;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #000;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.barTitle {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;

		//box-shadow: 0px 10px 10px #666666;
		.icon {
			position: absolute;
			left: 30rpx;
			top: 50%;
			transform: rotateY(-50%);
			margin: auto;
		}
	}

	.user {
		width: 100%;
		box-sizing: border-box;
		padding: 0 43rpx;
		margin-bottom: 30rpx;

		.user-avatar {
			width: 143rpx;
			height: 143rpx;
			position: relative;
			margin-right: 35rpx;

			.user-avatar-item {
				border-radius: 50%;
			}

			.user-avatar-edit {
				width: 42rpx;
				height: 42rpx;
				position: absolute;
				right: 0rpx;
				bottom: 0rpx;
				border-radius: 50%;
			}
		}

		.user-r {
			flex-direction: column;
			align-items: flex-start;

			.user-r-t {
				.user-r-t-name {
					font-family: Source Han Sans CN;
					font-weight: bold;
					font-size: 46rpx;
					color: #333333;
					margin-right: 18rpx;
					margin-bottom: 33rpx;
				}

				.user-r-t-name-create {
					image {
						width: 35rpx;
						height: 33rpx;
						margin-right: 7rpx;
					}

					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 24rpx;
					color: #FD890D;
				}
			}
		}
	}

	.remember {
		width: 690rpx;
		height: 200rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;
	}

	.layout {
		width: 100%;
		margin-bottom: 30rpx;
		box-sizing: border-box;
		padding: 0 43rpx;
		display: flex;
		align-items: center;

		.layout-l {
			width: 328rpx;
			height: 114rpx;
			position: relative;
			margin-right: 11rpx;

			.layout-l-tx {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				box-sizing: border-box;
				padding-left: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #D5201F;
			}
		}

		.layout-r {
			width: 328rpx;
			height: 114rpx;
			position: relative;

			.layout-l-tx {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				box-sizing: border-box;
				padding-left: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #816036;
			}
		}
	}

	.list {
		margin: 0 auto;

		width: 670rpx;
		box-sizing: border-box;
		padding: 38rpx;
		background: rgba(246, 241, 231, 0.65);
		border-radius: 16rpx;

		.list-item {
			margin-bottom: 81rpx;
			position: relative;

			button {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				z-index: 2;
			}

			&>image {
				width: 12rpx;
				height: 22rpx;
			}

			.list-item-l {

				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 14rpx;
				}
			}
		}

		.list-item:last-child {
			margin-bottom: 0;
		}
	}

	.popup {
		width: 750rpx;
		height: 944rpx;
		background: linear-gradient(0deg, #D8BE9E, #FFF6EA);
		border-radius: 32rpx 32rpx 0rpx 0rpx;

		.popup-title {
			text-align: center;
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			padding: 56rpx 0 50rpx;
		}

		.popup-content {
			width: 620rpx;
			height: 740rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 1px solid #84643B;
			margin: 0 auto;

			.popup-content-name {
				text-align: center;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 30rpx;
				color: #84643B;
				margin-top: 57rpx;
				margin-bottom: 15rpx;
			}

			.popup-content-wxCode {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				margin-bottom: 31rpx;

				image {
					width: 25rpx;
					height: 25rpx;
				}
			}

			.popup-content-qrCode {
				width: 308rpx;
				height: 307rpx;
				background: #ED7897;
				border-radius: 10rpx;
				margin: 0 auto;
				margin-bottom: 25rpx;
			}

			.popup-content-tx {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				text-align: center;
				margin-bottom: 82rpx;
			}
		}

		.popup-content-btn {
			width: 546rpx;
			height: 88rpx;
			background: #84643B;
			border-radius: 44rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: 0 auto;
		}
	}

	.auth {
		width: 670rpx;
		height: 143rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		padding-top: 30rpx;
		margin-bottom: 24rpx;

		image {
			width: 143rpx;
			height: 143rpx;
			margin-right: 36rpx;
		}
	}
</style>